<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>title</title>
		<link rel="stylesheet" type="text/css" href="../../css/api1.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style1.css"/>
		<style>
    html,body {
      height: 100%;
      width: 100%;
    }
		.header-box {
			/*border: 1px solid blue;*/
			position: relative;
			width: 100%;
			height: 43px;
			background-color: #ffffff
		}
		header {
			position: fixed;
			width: 100%;
			height: 43px;
			background-color: #ffffff;
			z-index: 11;
			box-shadow: 0 6px 20px #D7D7D7;
		}
		header .left {
			position: relative;
			width: 21.5px;
			height: 43px;
			left: 15px;
			background-image: url(../../icon/back.png);
			background-size: 21.5px 15.5px;
			background-position: center center;
			background-repeat: no-repeat;
			float: left;
		}
		header .center {
			position: relative;
			left: 37.5%;
			width: 25%;
			height: 43px;
			float: left;
			font-size: 18px;
			line-height: 43px;
		}
		header .right {
			width: 10%;
			height: 43px;
			float: right;
			margin-right: 7%;
			display: table;
		}
		.right .word1 {
			font-size: 14px; color: #6d7cd9; font-weight: bolder; text-align: center;
			line-height: 43px;
      display: table-cell;
      vertical-align: middle;
		}


		.searchbar-box {
      position: relative;
      left: 0;
      top: 0;
      width: 100%;
      height: 35px;
      background-color: #fff;
      z-index: 10;
    }
    .searchbar {
      position: fixed;
      width: 100%;
      height: 35px;
      background-color: #fff;
      z-index: 10;
    }
    .inputbar-box {
      position: relative;
      width: 100%;
      height: 100%;
    }
    .inputbar {
      position: relative;
			width: 90%;
			height: 35px;
			margin-left: 5%;
			background-color: #fbfbfb;
      /*margin-left: -47%;
      margin-top: -40%;*/
      border-radius: 5px;
    }
    .input {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }
    .inputbar img {
			position: relative;
			top: 10px;
      width: 16px;
      height: 18px;
      margin-left: 8px
    }

    .content-box {
      position: relative;
      width: 100%;
      height: auto;
    }
    .searchby_cata-box {
      width: 90%;
      height: 30%;
      margin-left: 5%;
    }


    .history-box {
      position: relative;
      width: 90%;
      height: auto;
      margin-left: 5%;
      padding-top: 4%;
			padding-bottom: 10%;
    }
    .title_2-box {
      position: relative;
      width: 100%;
      height: 50px;
    }
    .title_2 {
      font-size: 16px; color: #000;
      float: left;
    }

    .tag_box {
      padding-top: 15px;
      padding-bottom: 15px;
      position: relative;
      width: 95%;
      height: 120px;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 15px;
      box-shadow: 0 6px 20px #D7D7D7;
    }
    .tag_2 {
      width: 33%;
      height: 40px;
			float: left;
    }
    .block_2 {
      position: relative;
      width: 100%;
      height: 100%;
      background-color: #fff;
      font-size: 16px; color: #000; text-align: center ;
      line-height: 40px;
    }

    .close {
      width: auto;
      height: 100%;
      font-size: 12px; color: #6d7cd9; text-align: left ;
      padding-left: 15px;
      line-height: 35px;
      float: left;
    }

		.tags_selected_box {
			width: 100%;
			height: 10%;
			position: relative;
		}

    .tags_selected {
      width: 100%;
      height: 10%;
      position: fixed;
      top: 43px;
      z-index: 10;
      background-color: #fff;
    }

		.disabled {
			pointer-events: none;
		}


    </style>
</head>
<body>
	<div id=“body1” class="searchbar-box">
    <div class="searchbar">
      <div class="inputbar-box">
        <div class="inputbar">
          <img src="../../icon/search.png" alt="">
          <input id="input" type="text" oninput="chanege_content(event)" onpropertychange="chanege_content(event)"  class="input" placeholder="" style='padding-left:30px' onclick="">
        </div>
      </div>
      <div class="filter-box">
        <div class="filter"></div>
      </div>
  </div>
  </div>

  <div class="content-box">



    <div class="history-box">
      <div class="title_2-box">
        <div class="title_2">我关注的</div>
      </div>
      <div id="tag_box" class="tag_box">
      </div>
    </div>

		<div class="history-box">
      <div class="title_2-box">
        <div class="title_2">热门标签</div>
      </div>
      <div class="tag_box">
        <div class="tag_2"tapmode onclick="add_tag( this )">
          <div class="block_2">
            <div class="word">
              王伟帆
            </div>
          </div>
        </div>
        <div class="tag_2" onclick="add_tag( this )">
          <div class="block_2">
            <div class="word">
              小红
            </div>
          </div>
        </div>
        <div class="tag_2" onclick="add_tag( this )">
          <div class="block_2">
            <div class="word">
              小绿
            </div>
          </div>
        </div>
				<div class="tag_2" onclick="add_tag( this )">
          <div class="block_2">
            <div class="word">
              小花
            </div>
          </div>
        </div>
        <div class="tag_2">
          <div class="block_2">
            <div class="word">
              工程热力
            </div>
          </div>
        </div>
        <div class="tag_2">
          <div class="block_2">
            <div class="word">
              工程热力
            </div>
          </div>
        </div>
        <div class="tag_2">
          <div class="block_2">
            <div class="word">
              工程热力
            </div>
          </div>
        </div>
        <div class="tag_2">
          <div class="block_2">
            <div class="word">
              工程热力
            </div>
          </div>
        </div>

      </div>
    </div>

  </div>

</body>
<script type="text/javascript" src="../../script/api.js"></script>
<!-- <script type="text/javascript" src="../../script/zepto.min.js"></script> -->
<script type="text/javascript" src="../../script/jquery.js"></script>
<script type="text/javascript">

    var tags_list = [];
    var tag_dict;
    var tag_data;
    var list = new Array();
    var count;

    apiready = function(){
        list = [];
        tag_dict ={
            "user_id":"e3b3dc8d20b7052f5c0799f3aa4e9f3e",
            "since_id":0,
            "page_size":10
        }


        getData(tag_dict);
        tags_list = $api.getStorage('tags_list');  //存放从后端取出来的user的关注标签
        view_tags();
    };

    function getData(json) {
        $.ajax({
            type: 'POST',
            // url: "http://1.82.238.228:80/api/questionAnswer/getQuestion/",
            url: "http://1.82.238.228:80/api/tag/getTags/",
            data:JSON.stringify(json),
            // crossDomain: true,
            dataType: 'json',
            async: false,
            success:function(result){
                console.log('标签加载成功')
                tag_data =  result.data
                console.log(tag_data.length)

                // view_tips(result)
            },
            error:function(){
                console.log('标签加载失败');
            }
        });

    }
    function view_tags() {
        for (var i=0; i<tag_data.length; i++) {
            parentNode = document.getElementById('tag_box');
            sourceNode = document.createElement('div');
            sourceNode.setAttribute('class','tag_2');
            sourceNode.setAttribute("tapmode",'');
            // $(sourceNode).attr('onclick','add_tag(this)');
            sourceNode.onclick = function(){add_tag(this)};
            parentNode.appendChild(sourceNode);
            childNode = document.createElement('div');
            childNode.setAttribute('class','block_2');
            sourceNode.appendChild(childNode);
            grandNode = document.createElement('div');
            grandNode.setAttribute('class','word');
            grandNode.innerHTML = tag_data[i].name;
            childNode.appendChild(grandNode);
        }
    }
    function back(){
        api.closeWin();
    }

    function delete_tag(tag){
        tag.parentNode.parentNode.removeChild(tag.parentNode);

    }
    function add_tag(div) {

        text = div.childNodes[0].childNodes[0].innerHTML;
        list.push(text);
        $api.setStorage('choose_tags', list);
        console.log($api.getStorage('choose_tags'))
        $api.setStorage('tags',text);
        var jsfun ='line_num = Math.floor(($api.getStorage("tags_num")-1)/3+1); var parentNode = document.getElementById("tags_box");var sourceNode = document.createElement("div");sourceNode.setAttribute("class","tag_2");parentNode.appendChild(sourceNode);var childnode = document.createElement("div");childnode.setAttribute("class","block_2");sourceNode.appendChild(childnode); var grandnode1 = document.createElement("div");grandnode1.setAttribute("class","word");grandnode1.innerHTML = $api.getStorage("tags");var grandnode2 = document.createElement("div");grandnode2.setAttribute("class","delete");grandnode2.innerHTML = "×";grandnode2.onclick=function(){delete_tag(this)};grandnode2.setAttribute("tapmode","");childnode.appendChild(grandnode1); childnode.appendChild(grandnode2);$api.byId("selected_tags").style.display="";api.setFrameAttr({name: "biaoqian_frm",rect: {x: 0,y:60+60*line_num,w: api.winWidth,h: api.winHeight},});'
        api.execScript({
            name: 'biaoqian_win',
            script: jsfun
        });
        count = $api.getStorage('tags_num');
        console.log(count)
        $api.setStorage('tags_num',parseInt(count)+1);
        $api.addCls(div, 'disabled');
    }

    function Reactive(name) {
        list1 = $api.domAll('.disabled');
        for (var i = 0; i < list.length; i++) {
            if (list1[i].childNodes[0].childNodes[0].innerHTML == name) {
                $api.removeCls(list1[i], 'disabled');
                var index = list.indexOf(name)
                list.splice(index,1)
                $api.setStorage('choose_tags', list);
            }
        }
    }



    function fabu(){
        api.openWin({
            name: 'fabu',
            url: '../html/question_submit.html',
            bgColor: "#fff"
        });
    }
</script>
</html>
